<!-- ---
import BaseHead from '../../components/Head/BaseHead.astro';
import Nav from '../../components/Nav.astro';
import HomeHeader from '../../components/HomeHeader.astro';
import Card from '../../components/Card.astro';
import Footer from '../../components/Footer/Footer.astro'
import Paginator from '../../components/Paginator.astro'

interface MarkdownFrontmatter {
pubDate: string | number | Date;
  date: number;
}

export async function getStaticPaths({ paginate }) {
  const allPosts = await Astro.glob<MarkdownFrontmatter>('./*.md');
  const sortedPosts = allPosts.sort((a, b) => new Date(b.frontmatter.pubDate).valueOf() - new Date(a.frontmatter.pubDate).valueOf());


  return paginate(sortedPosts, {
    pageSize: 21
  })
}

const { page } = Astro.props
let pageTitle = 'Articles';
let pageDescription = `page ${page.currentPage} of all articles`;
let seoTitle = 'Articles | Creek';
let seoDescription = '';
---

<html lang="en">

<head>
  <BaseHead title={seoTitle} description={seoDescription} />
</head>

<body class="bg-white text-black font-body leading-normal personality-casual">
  <Nav />

  <main class="py-12 lg:py-20">
    <article class="max-w-6xl mx-auto px-3">
      <HomeHeader title={pageTitle} description={pageDescription} />
      <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 py-8" data-test="articles-section">
        {page.data.map(p => <div class="col-span-1">
          <Card post={p} />
        </div>)}
      </section>
    </article>
  </main>
  <Paginator page={page} />
  <Footer />
</body>

</html> -->